<template>
	<view class="container">
		
		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input 
					v-model="searchKeyword" 
					placeholder="搜索入库单号"
					@input="onSearchInput"
					class="search-input"
				/>
				<text v-if="searchKeyword" class="clear-icon" @click="clearSearch">✕</text>
			
		</view>
		<view class="action-btn add-btn" @click="showAddMenu">
				<text class="btn-icon">+</text>
			</view>
		</view>
		
		<!-- 入库记录卡片列表 -->
		<view class="record-list">
			<view 
				v-for="(item, index) in filteredRecords" 
				:key="index" 
				class="record-card" 
				@click="viewDetail(item)"
			>
			<!-- 卡片内容 -->
			<view class="card-content">
					<view class="card-header">
						<text class="card-title">{{ item.orderId }}</text>
						<text class="type-badge inbound">{{ item.type }}</text>
					</view>
					
					<view class="card-info">
						<view class="info-row">
							<text class="info-label">仓库：</text>
							<text class="info-value">{{ item.warehouse }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">时间：</text>
							<text class="info-value">{{ item.inboundTime }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">执行人：</text>
							<text class="info-value">{{ item.executor }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-if="!loading && filteredRecords.length === 0">
			<text class="empty-icon">📥</text>
			<text class="empty-text">暂无入库记录</text>
		</view>
		
		<!-- 加载状态 -->
		<view class="loading-state" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 新增入库弹窗 -->
		<view class="add-menu" v-if="showAddMenuFlag" @click="hideAddMenu">
			<view class="add-menu-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">新增入库</text>
					<text class="modal-close" @click="hideAddMenu">×</text>
				</view>
				
				<view class="modal-body">
					<view class="form-group">
						<text class="form-label">选择仓库</text>
						<picker @change="onWarehouseChange" :value="warehouseIndex" :range="warehouseOptions">
							<view class="picker-input">
								<text class="picker-text">{{ selectedWarehouse || '请选择仓库' }}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					
					<view class="form-group">
						<text class="form-label">入库类型</text>
						<picker @change="onTypeChange" :value="typeIndex" :range="typeOptions">
							<view class="picker-input">
								<text class="picker-text">{{ selectedTypeName || '请选择入库类型' }}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					
					<view class="form-group">
						<text class="form-label">备注</text>
						<textarea class="textarea-input" v-model="remark" placeholder="请输入备注信息"></textarea>
					</view>
					
					<view class="form-group">
						<button class="add-parts-btn" @click="addParts">+ 选择备件</button>
					</view>
					
					<view class="parts-table">
						<view class="table-header">
							<text class="table-cell">备件编号</text>
							<text class="table-cell">备件名称</text>
							<text class="table-cell">规格型号</text>
							<text class="table-cell">备件类型</text>
							<text class="table-cell">分库存</text>
							<text class="table-cell">入库数</text>
							<text class="table-cell">操作</text>
						</view>
						<view class="table-body">
							<view v-if="selectedParts.length === 0" class="empty-row">
								<text>暂无数据</text>
							</view>
						<view v-for="(part, index) in selectedParts" :key="index" class="table-row">
							<text class="table-cell">{{ part.partNo }}</text>
							<text class="table-cell">{{ part.partName }}</text>
							<text class="table-cell">{{ part.specNo }}</text>
							<text class="table-cell">{{ getPartTypeName(part.partType) }}</text>
							<text class="table-cell">{{ part.currentStock || 0 }}</text>
							<view class="table-cell quantity-cell">
								<view class="quantity-control">
									<button class="quantity-btn minus-btn" @click="decreaseQuantity(index)">-</button>
									<input class="quantity-input" type="number" v-model.number="part.quantity" @input="validateQuantity(index)" />
									<button class="quantity-btn plus-btn" @click="increaseQuantity(index)">+</button>
								</view>
							</view>
							<text class="table-cell delete-btn" @click="removePart(index)">删除</text>
						</view>
						</view>
					</view>
				</view>
				
				<view class="modal-footer">
					<button class="cancel-btn" @click="hideAddMenu">取消</button>
					<button class="confirm-btn" @click="confirmAdd">确定</button>
				</view>
			</view>
		</view>
		
		<!-- 备件选择弹窗 -->
		<view class="parts-select-modal" v-if="showPartsSelect" @click="hidePartsSelect">
			<view class="parts-select-content" @click.stop>
				<view class="parts-select-header">
					<text class="parts-select-title">选择备件</text>
					<text class="parts-select-close" @click="hidePartsSelect">×</text>
				</view>
				
				<view class="parts-select-body">
					<view class="parts-search">
						<input class="parts-search-input" v-model="partsSearchKeyword" placeholder="搜索备件编号或名称" />
					</view>
					
				<view class="parts-list">
					<view v-for="(part, index) in filteredPartsList" :key="index" class="parts-item" @click="selectPart(part)">
						<view class="parts-info">
							<text class="parts-name">{{ part.partName }}</text>
							<text class="parts-code">{{ part.partNo }}</text>
							<text class="parts-spec">{{ part.specNo }}</text>
							<text class="parts-type">{{ getPartTypeName(part.partType) }}</text>
							<text class="parts-stock">库存: {{ part.currentStock || 0 }}</text>
						</view>
						<view class="parts-select-btn">
							<text>选择</text>
						</view>
					</view>
				</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { listTransaction, addTransaction } from '@/api/inventory/transaction.js'
	import { listWarehouse, listWarehouseDTO } from '@/api/inventory/warehouse.js'
	import { addTransactionItem } from '@/api/inventory/transactionItem.js'
	import { listPart } from '@/api/inventory/part.js'
	import { listPartType } from '@/api/inventory/partType.js'
	
	export default {
		data() {
			return {
				searchKeyword: '',
				allRecords: [], // 保存所有原始数据用于搜索
				loading: false,
				showFilterMenu: false, // 控制过滤菜单显示
				selectedType: '', // 选中的类型过滤
				showAddMenuFlag: false, // 控制添加菜单显示
				partTypeOptions: [], // 备件类型字典
				typeOptions: [
					'采购入库',
					'调拨入库',
					'退货入库',
					'维修入库',
					'盘点入库',
					'其他入库'
				],
				typeOptionsData: [
					{ label: '采购入库', value: 'PURCHASE' },
					{ label: '调拨入库', value: 'TRANSFER' },
					{ label: '退货入库', value: 'RETURN' },
					{ label: '维修入库', value: 'REPAIR' },
					{ label: '盘点入库', value: 'INVENTORY' },
					{ label: '其他入库', value: 'OTHER' }
				],
				debugInfo: '', // 调试信息
				
				// 弹窗相关数据
				selectedWarehouse: '',
				warehouseIndex: 0,
				warehouseOptions: [],
				warehouseList: [], // 存储完整的仓库数据
				selectedTypeName: '',
				typeIndex: 0,
				remark: '',
				selectedParts: [],
				
				// 备件选择相关数据
				showPartsSelect: false,
				partsSearchKeyword: '',
				partsList: [], // 所有备件列表
				selectedPartsIds: [] // 已选择的备件ID列表
			}
		},
		computed: {
			// 过滤类型选项（用于搜索过滤）
			filterTypeOptions() {
				return [
					{ label: '全部类型', value: '' },
					...this.typeOptionsData
				];
			},
			
			// 过滤备件列表
			filteredPartsList() {
				// 获取当前选中仓库的代码
				const selectedWarehouseData = this.warehouseList[this.warehouseIndex];
				const warehouseCode = selectedWarehouseData ? selectedWarehouseData.warehouseCode : null;

				let filtered = this.partsList;

				// 仓库校验：只显示当前选中仓库的备件
				if (warehouseCode) {
					filtered = filtered.filter(part => part.warehouseCode === warehouseCode);
				}

				// 排除已选择的备件
				filtered = filtered.filter(part => !this.selectedPartsIds.includes(part.id));

			// 搜索关键词过滤
			if (this.partsSearchKeyword) {
				filtered = filtered.filter(part =>
					(part.partNo && part.partNo.includes(this.partsSearchKeyword)) ||
					(part.partName && part.partName.includes(this.partsSearchKeyword)) ||
					(part.partType && part.partType.includes(this.partsSearchKeyword))
				);
			}

			return filtered;
		},
			
			// 根据搜索关键词和类型过滤记录
			filteredRecords() {
				let records = this.allRecords;

				// 类型过滤
				if (this.selectedType) {
					records = records.filter(item => item.type === this.selectedType);
				}

				// 关键词搜索 - 恢复原来的全字段搜索
				if (this.searchKeyword.trim()) {
					const keyword = this.searchKeyword.toLowerCase();
					records = records.filter(item => {
						return (item.orderId && item.orderId.toLowerCase().includes(keyword)) ||
							   (item.type && item.type.toLowerCase().includes(keyword)) ||
							   (item.warehouse && item.warehouse.toLowerCase().includes(keyword)) ||
							   (item.executor && item.executor.toLowerCase().includes(keyword));
					});
				}

				return records;
			}
		},
	watch: {
		// 监听allRecords变化，确保响应式更新
		allRecords: {
			handler(newRecords) {
				// 数据变化监听
			},
			deep: true
		}
	},
	onLoad() {
		this.loadInboundRecords();
		this.loadPartTypes();
	},
	onShow() {
		// 每次显示时重新加载数据
		this.loadInboundRecords();
	},
	methods: {
		// 加载备件类型字典
		async loadPartTypes() {
			try {
				const response = await listPartType({ enabled: 1 });
				if (response.code === 200 && response.rows) {
					this.partTypeOptions = response.rows;
				}
			} catch (error) {
				console.error('加载备件类型字典失败:', error);
			}
		},
		
		// 获取备件类型中文名称
		getPartTypeName(code) {
			if (!code) return '未知';
			const partType = this.partTypeOptions.find(item => item.code === code);
			return partType ? partType.name : code;
		},
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 搜索输入处理
			onSearchInput() {
				// 搜索逻辑已在computed中处理
			},
			
			// 清除搜索
			clearSearch() {
				this.searchKeyword = '';
			},
			
			// 切换过滤菜单
			toggleFilterMenu() {
				this.showFilterMenu = !this.showFilterMenu;
			},
			
			// 选择类型过滤
			selectTypeFilter(type) {
				this.selectedType = type;
				this.showFilterMenu = false;
			},
			
		// 加载入库记录
		loadInboundRecords() {
			this.loading = true;
			listTransaction({ pageNum: 1, pageSize: 10 })
				.then(response => {
					if (response.code === 200 && response.rows) {
						// 过滤只保留以R开头的入库记录
						const filteredRows = response.rows.filter(item => {
							return item.txNo && item.txNo.toUpperCase().startsWith('R');
						});
						// 所有入库记录都显示为"入库"
						this.allRecords = filteredRows.map(item => ({
							id: item.id,
							orderId: item.txNo,
							type: '入库', // 固定显示为入库
							warehouse: item.warehouseCode,
							inboundTime: this.formatTime(item.createdAt),
							executor: item.operatorName,
							remark: item.remark || ''
						}));
					} else {
						this.allRecords = [];
					}
					this.loading = false;
				})
				.catch(() => {
					this.loading = false;
					this.allRecords = [];
				});
		},
			
			// 格式化时间
			formatTime(timeString) {
				if (!timeString) return '未知时间';
				try {
					let date;
					if (timeString.includes('T')) {
						date = new Date(timeString);
					} else if (timeString.includes(' ')) {
						const parts = timeString.split(' ');
						if (parts.length === 2) {
							const datePart = parts[0];
							const timePart = parts[1];
							date = new Date(`${datePart}T${timePart}`);
						} else {
							date = new Date(timeString);
						}
					} else {
						date = new Date(timeString);
					}

					if (isNaN(date.getTime())) return '未知时间';

					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					const hours = String(date.getHours()).padStart(2, '0');
					const minutes = String(date.getMinutes()).padStart(2, '0');
					return `${year}-${month}-${day} ${hours}:${minutes}`;
				} catch (error) {
					console.error('时间格式化失败:', error, timeString);
					return '未知时间';
				}
			},
			
		// 查看详情
		viewDetail(item) {
			// 跳转到详情页面
			uni.navigateTo({
				url: `/pages/spare-parts/transaction-detail?txNo=${item.orderId}&type=inbound`
			});
		},
			
			// 显示添加菜单
			showAddMenu() {
				this.showAddMenuFlag = true;
				// 加载仓库列表
				this.loadWarehouseList();
			},
			
			// 隐藏添加菜单
			hideAddMenu() {
				this.showAddMenuFlag = false;
			},
			
			// 创建入库
			createInbound(type) {
				console.log('创建入库:', type);
				
				// 根据类型跳转到不同的入库页面
				const typeMapping = {
					'PURCHASE': '采购入库',
					'TRANSFER': '调拨入库',
					'RETURN': '退货入库',
					'REPAIR': '维修入库',
					'INVENTORY': '盘点入库',
					'OTHER': '其他入库'
				};
				
				const typeName = typeMapping[type] || '其他入库';
				
				// 隐藏菜单
				this.hideAddMenu();
				
				uni.showModal({
					title: '确认入库',
					content: `确定要创建${typeName}吗？`,
					success: (res) => {
						if (res.confirm) {
							// 跳转到入库创建页面
							uni.navigateTo({
								url: `/pages/spare-parts/inbound-create?type=${type}&typeName=${typeName}`
							});
						}
					}
				});
			},
			
		// 加载仓库列表
		async loadWarehouseList() {
			try {
				// 先尝试DTO格式的API
				let response;
				try {
					response = await listWarehouseDTO({});
				} catch (dtoError) {
					response = await listWarehouse({});
				}
				
				if (response.code === 200 && response.data) {
					this.warehouseList = response.data.rows || response.data;
					
					// 构建显示选项
					this.warehouseOptions = this.warehouseList.map(warehouse => {
						return warehouse.warehouseName || warehouse.name || warehouse.warehouse_name;
					});
				} else {
					this.setDefaultWarehouseData();
				}
			} catch (error) {
				console.error('加载仓库列表失败:', error);
				this.setDefaultWarehouseData();
			}
		},
			
		// 设置默认仓库数据
		setDefaultWarehouseData() {
			this.warehouseList = [
				{ warehouseCode: 'WH001', warehouseName: '主仓库' },
				{ warehouseCode: 'WH002', warehouseName: '备件仓库' },
				{ warehouseCode: 'WH003', warehouseName: '维修仓库' },
				{ warehouseCode: 'WH004', warehouseName: '大连仓库' }
			];
			this.warehouseOptions = this.warehouseList.map(warehouse => warehouse.warehouseName);
		},
			
			// 仓库选择
			onWarehouseChange(e) {
				this.warehouseIndex = e.detail.value;
				this.selectedWarehouse = this.warehouseOptions[e.detail.value];
			},
			
		// 类型选择
		onTypeChange(e) {
			this.typeIndex = e.detail.value;
			this.selectedTypeName = this.typeOptions[e.detail.value];
		},
			
			// 添加备件
			addParts() {
				this.showPartsSelect = true;
				this.loadPartsList();
			},
			
		// 加载备件列表
		async loadPartsList() {
			if (!this.selectedWarehouse) {
				uni.showToast({
					title: '请先选择仓库',
					icon: 'none'
				});
				return;
			}
			
			try {
				// 显示加载提示
				uni.showLoading({
					title: '加载备件中...'
				});
				
				// 从API获取备件列表
				const response = await listPart();
				
				if (response.code === 200 && response.rows) {
					// 处理备件数据，添加id字段用于选择控制
					this.partsList = response.rows.map((part, index) => ({
						...part,
						id: part.partNo, // 使用partNo作为唯一标识
						partName: part.name, // API返回的是name，统一成partName
						partType: part.partTypeCode || '未知', // 使用partTypeCode作为类型
						currentStock: part.stockTotal || 0, // 使用stockTotal作为当前库存
						warehouseCode: part.warehouseCode
					}));
				} else {
					this.partsList = [];
					uni.showToast({
						title: response.msg || '获取备件列表失败',
						icon: 'none'
					});
				}
				
				uni.hideLoading();
				
				if (this.partsList.length === 0) {
					uni.showToast({
						title: '该仓库暂无备件',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载备件列表失败:', error);
				uni.hideLoading();
				uni.showToast({
					title: '加载备件列表失败',
					icon: 'none'
				});
				this.partsList = [];
			}
		},
			
			// 选择备件
			selectPart(part) {
				// 检查是否已经选择过
				if (this.selectedPartsIds.includes(part.id)) {
					uni.showToast({
						title: '该备件已选择',
						icon: 'none'
					});
					return;
				}
				
				// 添加到已选择列表
				this.selectedParts.push({
					...part,
					quantity: 1 // 默认数量为1
				});
				this.selectedPartsIds.push(part.id);
				
				uni.showToast({
					title: '备件已添加',
					icon: 'success'
				});
				
				this.hidePartsSelect();
			},
			
			// 隐藏备件选择弹窗
			hidePartsSelect() {
				this.showPartsSelect = false;
				this.partsSearchKeyword = '';
			},
			
			// 删除备件
			removePart(index) {
				const partId = this.selectedParts[index].id;
				this.selectedParts.splice(index, 1);
				// 从已选择ID列表中移除
				const idIndex = this.selectedPartsIds.indexOf(partId);
				if (idIndex > -1) {
					this.selectedPartsIds.splice(idIndex, 1);
				}
			},
			
			// 增加数量
			increaseQuantity(index) {
				this.selectedParts[index].quantity += 1;
			},
			
			// 减少数量
			decreaseQuantity(index) {
				if (this.selectedParts[index].quantity > 1) {
					this.selectedParts[index].quantity -= 1;
				}
			},
			
			// 验证数量输入
			validateQuantity(index) {
				const quantity = this.selectedParts[index].quantity;
				if (quantity < 1) {
					this.selectedParts[index].quantity = 1;
				}
			},
			
			// 获取入库类型名称
			getInboundTypeName(txType) {
				const typeMapping = {
					'PURCHASE': '采购入库',
					'TRANSFER': '调拨入库',
					'RETURN': '退货入库',
					'INVENTORY_GAIN': '盘盈入库',
					'OTHER': '其他入库'
				};
				return typeMapping[txType] || '入库';
			},
			
			// 确认添加
			async confirmAdd() {
				if (!this.selectedWarehouse) {
					uni.showToast({
						title: '请选择仓库',
						icon: 'none'
					});
					return;
				}

				if (!this.selectedTypeName) {
					uni.showToast({
						title: '请选择入库类型',
						icon: 'none'
					});
					return;
				}

				if (this.selectedParts.length === 0) {
					uni.showToast({
						title: '请选择备件',
						icon: 'none'
					});
					return;
				}

				// 获取选中的仓库代码
				const selectedWarehouseData = this.warehouseList[this.warehouseIndex];
				const warehouseCode = selectedWarehouseData ? selectedWarehouseData.warehouseCode : '';

				try {
					uni.showLoading({
						title: '创建中...'
					});

					// 根据选择类型映射到业务类型
					const bizTypeMapping = {
						'采购入库': 'PURCHASE',
						'调拨入库': 'TRANSFER',
						'退货入库': 'RETURN',
						'维修入库': 'REPAIR',
						'盘点入库': 'INVENTORY',
						'其他入库': 'OTHER'
					};

					// 构建入库单头数据
					// txType 统一为 INBOUND（入库），bizRefType 区分具体业务类型
					const transactionData = {
						txType: 'INBOUND', // 所有入库都使用 INBOUND，后端会生成 RK 前缀
						warehouseCode: warehouseCode,
						remark: this.remark || '',
						bizRefType: bizTypeMapping[this.selectedTypeName] || 'PURCHASE', // 业务类型
						bizRefId: null // 业务ID，暂时为空
					};

					console.log('创建入库单头:', transactionData);

					// 创建入库单头
					const transactionResponse = await addTransaction(transactionData);
					console.log('入库单头创建响应:', transactionResponse);

					if (transactionResponse.code !== 200) {
						throw new Error(transactionResponse.msg || '创建入库单失败');
					}

					// 处理不同的响应格式 - 获取txNo
				let txNo = null;
				if (transactionResponse.data && transactionResponse.data.txNo) {
					txNo = transactionResponse.data.txNo;
				} else if (transactionResponse.txNo) {
					txNo = transactionResponse.txNo;
				} else {
					// 如果API没有返回txNo，尝试通过查询获取最新创建的入库单
					await new Promise(resolve => setTimeout(resolve, 1000));

					try {
						// 尝试多次查询，确保获取到最新数据
						let retryCount = 0;
						const maxRetries = 3;

						while (retryCount < maxRetries && !txNo) {
							const listResponse = await listTransaction({
								pageNum: 1,
								pageSize: 10
							});

							if (listResponse.code === 200 && listResponse.rows && listResponse.rows.length > 0) {
								const latestRecord = listResponse.rows[0];

								// 检查可能的字段名：txNo 或 tx_no
								txNo = latestRecord.txNo || latestRecord.tx_no;

								if (txNo) {
									break;
								}
							}

							retryCount++;
							if (retryCount < maxRetries) {
								await new Promise(resolve => setTimeout(resolve, 500));
							}
						}
					} catch (queryError) {
						console.error('查询最新入库单失败:', queryError);
					}
				}

				if (!txNo) {
					throw new Error('无法获取入库单号，请联系管理员');
				}

				// 创建入库单明细项
				for (const part of this.selectedParts) {
					const itemData = {
						txNo: txNo,
						partNo: part.partNo,
						quantity: part.quantity,
						direction: 'IN', // 入库方向
						remark: `${part.partName || part.name || '备件'} 入库`
					};

					const itemResponse = await addTransactionItem(itemData);

					if (itemResponse.code !== 200) {
						console.error('创建入库明细失败:', itemResponse);
						// 继续创建其他明细，不中断
					}
				}

				uni.hideLoading();
				uni.showToast({
					title: '入库单创建成功',
					icon: 'success'
				});

				// 重置表单
				this.resetForm();
				this.hideAddMenu();

				// 刷新入库记录列表
				this.loadInboundRecords();

			} catch (error) {
				console.error('创建入库单失败:', error);
				uni.hideLoading();
				uni.showToast({
					title: error.message || '创建入库单失败',
					icon: 'none'
				});
			}
		},
		
		// 重置表单
		resetForm() {
			this.selectedWarehouse = '';
			this.warehouseIndex = 0;
			this.selectedTypeName = '';
			this.typeIndex = 0;
			this.remark = '';
			this.selectedParts = [];
			this.selectedPartsIds = [];
			this.partsSearchKeyword = '';
		}
	}
}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background: #F5F5F5;
	}

	.action-btn {
		width: 70rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 50%;
		transition: all 0.2s;
		
		&:active {
			background: rgba(0, 0, 0, 0.5);
			transform: scale(0.95);
		}
	}

	.btn-icon {
		font-size: 40rpx;
		color: black;
		font-weight: bold;
	}

	/* 搜索栏 */
	.search-section {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background: white;
	}

	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		background: #F5F5F5;
		border-radius: 50rpx;
		padding: 0 30rpx;
		height: 80rpx;
	}

	.search-icon {
		font-size: 32rpx;
		margin-right: 20rpx;
		color: #999;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.clear-icon {
		font-size: 32rpx;
		color: #999;
		padding: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.selected-filter {
		background-color: #007bff;
		color: white;
		padding: 2px 8px;
		border-radius: 12px;
		font-size: 12px;
	}

	.filter-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: white;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		z-index: 1000;
	}

	.filter-option {
		padding: 12px 16px;
		border-bottom: 1px solid #f0f0f0;
	}

	.filter-option:last-child {
		border-bottom: none;
	}

	.filter-option.active {
		background-color: #e3f2fd;
		color: #1976d2;
	}

	/* 记录卡片列表 */
	.record-list {
		padding: 0 30rpx 30rpx;
	}

	.record-card {
		display: flex;
		background: white;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: transform 0.2s;
		
		&:active {
			transform: scale(0.98);
		}
	}

	/* 卡片内容 */
	.card-content {
		flex: 1;
		padding: 24rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.type-badge {
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: 500;
		white-space: nowrap;
		margin-left: 12rpx;
	}

	.type-badge.inbound {
		background-color: #E8F5E9;
		color: #4CAF50;
	}

	.type-badge.outbound {
		background-color: #FFEBEE;
		color: #F44336;
	}

	.card-info {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}

	.info-label {
		color: #999;
		min-width: 120rpx;
	}

	.info-value {
		color: #666;
		flex: 1;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60px 20px;
		text-align: center;
	}

	.empty-icon {
		font-size: 48px;
		margin-bottom: 16px;
	}

	.empty-text {
		font-size: 16px;
		color: #666;
	}

	.loading-state {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40px;
	}

	.loading-text {
		font-size: 14px;
		color: #666;
	}

	.add-menu {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-menu-content {
		background-color: white;
		border-radius: 8px;
		width: 90%;
		max-width: 800px;
		max-height: 80vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 20px;
		border-bottom: 1px solid #e8e8e8;
		background-color: #fafafa;
	}

	.modal-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.modal-close {
		font-size: 20px;
		color: #999;
		cursor: pointer;
	}

	.modal-body {
		padding: 20px;
		flex: 1;
		overflow-y: auto;
	}

	.form-group {
		margin-bottom: 16px;
	}

	.form-label {
		display: block;
		font-size: 14px;
		color: #333;
		margin-bottom: 8px;
		font-weight: 500;
	}

	.picker-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 12px;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
		background-color: white;
	}

	.picker-text {
		font-size: 14px;
		color: #333;
	}

	.picker-arrow {
		font-size: 12px;
		color: #999;
	}

	.textarea-input {
		width: 100%;
		min-height: 60px;
		padding: 8px 12px;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
		font-size: 14px;
		resize: none;
	}

	.add-parts-btn {
		background-color: #1890ff;
		color: white;
		border: none;
		padding: 8px 16px;
		border-radius: 4px;
		font-size: 14px;
		cursor: pointer;
	}

	.parts-table {
		margin-top: 16px;
		border: 1px solid #e8e8e8;
		border-radius: 4px;
		overflow: hidden;
	}

	.table-header {
		display: flex;
		background-color: #fafafa;
		border-bottom: 1px solid #e8e8e8;
	}

	.table-row {
		display: flex;
		border-bottom: 1px solid #f0f0f0;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.table-cell {
		flex: 1;
		padding: 8px 12px;
		font-size: 12px;
		text-align: center;
		border-right: 1px solid #f0f0f0;
	}

	.table-cell:last-child {
		border-right: none;
	}

	.empty-row {
		padding: 20px;
		text-align: center;
		color: #999;
		font-size: 14px;
	}

	.delete-btn {
		color: #ff4d4f;
		cursor: pointer;
	}

	.modal-footer {
		display: flex;
		justify-content: flex-end;
		gap: 12px;
		padding: 16px 20px;
		border-top: 1px solid #e8e8e8;
		background-color: #fafafa;
	}

	.cancel-btn {
		padding: 8px 16px;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
		background-color: white;
		color: #333;
		font-size: 14px;
		cursor: pointer;
	}

	.confirm-btn {
		padding: 8px 16px;
		border: none;
		border-radius: 4px;
		background-color: #1890ff;
		color: white;
		font-size: 14px;
		cursor: pointer;
	}

	/* 备件选择弹窗样式 */
	.parts-select-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.parts-select-content {
		background-color: white;
		border-radius: 8px;
		width: 90%;
		max-width: 600px;
		max-height: 80vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.parts-select-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 20px;
		border-bottom: 1px solid #e8e8e8;
		background-color: #fafafa;
	}

	.parts-select-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.parts-select-close {
		font-size: 20px;
		color: #999;
		cursor: pointer;
	}

	.parts-select-body {
		padding: 20px;
		flex: 1;
		overflow-y: auto;
	}

	.parts-search {
		margin-bottom: 16px;
	}

	.parts-search-input {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
		font-size: 14px;
	}

	.parts-list {
		max-height: 400px;
		overflow-y: auto;
	}

	.parts-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px;
		border: 1px solid #e8e8e8;
		border-radius: 4px;
		margin-bottom: 8px;
		background-color: #fafafa;
	}

	.parts-item:active {
		background-color: #e9ecef;
	}

	.parts-info {
		flex: 1;
	}

	.parts-name {
		display: block;
		font-size: 14px;
		font-weight: bold;
		color: #333;
		margin-bottom: 4px;
	}

	.parts-code {
		display: block;
		font-size: 12px;
		color: #666;
		margin-bottom: 2px;
	}

	.parts-spec {
		display: block;
		font-size: 12px;
		color: #666;
		margin-bottom: 2px;
	}

	.parts-type {
		display: block;
		font-size: 12px;
		color: #666;
		margin-bottom: 2px;
	}

	.parts-stock {
		display: block;
		font-size: 12px;
		color: #1890ff;
	}

	.parts-select-btn {
		padding: 6px 12px;
		background-color: #1890ff;
		color: white;
		border-radius: 4px;
		font-size: 12px;
	}

	/* 数量控制样式 */
	.quantity-cell {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
		overflow: hidden;
	}

	.quantity-btn {
		width: 24px;
		height: 24px;
		border: none;
		background-color: #f5f5f5;
		color: #333;
		font-size: 14px;
		font-weight: bold;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.quantity-btn:active {
		background-color: #e9ecef;
	}

	.quantity-input {
		width: 40px;
		height: 24px;
		border: none;
		text-align: center;
		font-size: 12px;
		background-color: white;
	}

	.quantity-input:focus {
		outline: none;
	}
</style>